import React, { useState,useEffect } from 'react'
import '../scss/Information.scss'
import { Descriptions, Cascader, Checkbox, InputNumber, Input, Button } from 'antd';
import {
  RightOutlined,
} from '@ant-design/icons';
import { Link } from "react-router-dom"

export default function Information(props) {

  const [resData, setresDtata] = useState({
    name:'刘德华',
    xingzhi:'商业'
  })

  useEffect(()=>{
    console.log('Information');
  },[])



  const submint = type => {
    console.log('submint');
    console.log(props.name);
    console.log(props.state);
  }

  return (
    <div className='Information'>
      <div className='infor-title'>
        贷款信息
      </div>
      <Descriptions bordered size="small">
        <Descriptions.Item label="客户姓名：">{resData.name}<a className='info'>客户资料档案<RightOutlined /></a></Descriptions.Item>
        <Descriptions.Item label="" span={2} > </Descriptions.Item>
        <Descriptions.Item label="贷款性质："><Cascader placeholder={resData.xingzhi} disabled /></Descriptions.Item>
        <Descriptions.Item label="贷款类型:" span={2}><Cascader placeholder="信用" disabled /></Descriptions.Item>
        <Descriptions.Item label="贷款用途:" span={3}><Checkbox disabled defaultChecked /> 日常生活消费</Descriptions.Item>
        <Descriptions.Item label="还款方式："><Cascader placeholder="等额本息" disabled /></Descriptions.Item>
        <Descriptions.Item label="借款期限：" span={2}><Cascader placeholder="48个月" disabled /></Descriptions.Item>
        <Descriptions.Item label="申请金额："><InputNumber disabled defaultValue={500000} /> 元</Descriptions.Item>
        <Descriptions.Item label="审批金额：" span={2}><InputNumber disabled defaultValue={480000} /> 元</Descriptions.Item>
        <Descriptions.Item label="合同金额："><InputNumber disabled defaultValue={480000} /> 元</Descriptions.Item>
        <Descriptions.Item label="" span={2}> </Descriptions.Item>
      </Descriptions>
      <div className='infor-title' >
        费用信息
      </div>
      <Descriptions bordered size="small">
        <Descriptions.Item label="综合利率:"><InputNumber disabled defaultValue={15} /> %</Descriptions.Item>
        <Descriptions.Item label="服务费:" span={2}><InputNumber disabled defaultValue={0.0} /> 元</Descriptions.Item>
        <Descriptions.Item label="管理费:"><InputNumber disabled defaultValue={0} /> 元</Descriptions.Item>
        <Descriptions.Item label="" span={2}></Descriptions.Item>
      </Descriptions>
      <div className='infor-title'>
        银行信息
      </div>
      <Descriptions bordered size="small">
        <Descriptions.Item label="开户行:"><Cascader placeholder="中国银行" disabled /></Descriptions.Item>
        <Descriptions.Item label="户名:" span={2}><Input disabled placeholder='刘德华' /></Descriptions.Item>
        <Descriptions.Item label="开户地:"><Cascader placeholder="四川省 成都市 金牛区" disabled /></Descriptions.Item>
        <Descriptions.Item label="支行名称:" span={2}><Cascader placeholder="中国建设银行" disabled /></Descriptions.Item>
        <Descriptions.Item label="银行账号:"><Cascader placeholder="123456789" disabled /></Descriptions.Item>
        <Descriptions.Item label="服务费:" span={2}></Descriptions.Item>
      </Descriptions>

      <Link to={{
        pathname: "/home/dueremind",
        name: props.name
      }}><Button className='btn' onClick={submint} disabled={props.state == 'OverDueList' ? true : false}>到期提醒</Button>
      </Link>

    </div>
  )
}
